<!--
 * @Author: 陈鑫茹 2182688619@qq.com
 * @Date: 2025-09-11 08:38:50
 * @LastEditors: 陈鑫茹 2182688619@qq.com
 * @LastEditTime: 2025-09-19 14:38:19
 * @FilePath: \23信算\city\src\pages\components\Left2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Title :title="title"></Title>
        <!-- 提供图表容器 -->
        <div ref="left2" style="height: 150px;"></div>
    </div>
</template>
<script>
import { Pie } from '@antv/g2plot';
import { get } from '@/utils/request';
export default {
    data() {
        return {
            title: '设备状态分布',
            // 存放设备状态数据
            empData:[]
        }
    },
    methods: {
        // 加载饼图的函数
        loadPie() {
            const piePlot = new Pie(this.$refs.left2, {
                appendPadding: 10,
                data:this.empData,
                angleField: 'value',
                colorField: 'type',
                color: ({ type }) => {
                    if (type === '在线') {
                        return '#FF8C94';
                    }
                    return '#FFD877';
                },
                radius: 0.8,
                tooltip: { showMarkers: false,
                    domStyles:{
                        "g2-tooltip":{
                            background:'#147',
                            color:"white",
                            fontSize:20
                        }
                    }
                 },
                state: {
                    active: {
                        style: {
                            shadowBlur: 4,
                            stroke: '#000',
                            fill: 'red',
                        },
                    },
                },
                //设置动画
                animation: {
                    appear: {
                        animation: 'wave-in',
                        duration: 5000,
                    },
                },
                label: {
                    type: 'outer',  //文本位置  外侧
                    content: '{name} {value}台', //文本内容
                    // 设置文本颜色
                    style: {
                        fill: 'white'
                    }
                },
                legend: {
                    // 设置图列位置  上方
                    position: 'top',
                    // 设置分类图列文本name属性
                    itemName: {
                        // 设置文本属性的颜色
                        style: {
                            fill: "white"
                        }
                    }
                },
                interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
            });
            piePlot.render();
        },
        // 封装请求获取设备数据
        async getEmpData(){
            let res = await get('/dashboard/queryDeviceOnlineNumber');
            // console.log(res,'222222');
            this.empData = res.data;
        }
    },
    async mounted() {
        await this.getEmpData();
        this.loadPie();
    }
}
</script>
<style lang="less" scoped></style>